<!-- pages/assist-rental/index.vue -->
<template>
  <view class="container">
<!--    顶部导航栏
    <view class="nav-bar">
      <view class="nav-left" @click="goBack">
        <image class="nav-icon" src="/images/back.png"></image>
      </view>
      <view class="nav-title">辅具租赁</view>
      <view class="nav-right">
        <image class="nav-icon-more" src="/images/more.png"></image>
      </view>
    </view> -->

    <!-- 广告横幅区域 -->
    <view class="banner-container" v-for="(item, index) in gridList" :index="index">
      <image class="banner-bg" :src="item.assisitveImg" mode="aspectFill"></image>
      <view class="banner-content">
        <view class="banner-top">
          <image class="banner-logo" src="/images/jd-logo.png"></image>
          <text class="banner-brand">{{ item.assisitveName }}</text>
        </view>
        
<!--        <view class="banner-promotion">
          <text class="promotion-tag premium">旗舰升级</text>
          <text class="promotion-tag">极致精准</text>
          <view class="promotion-price">
            <text class="price-label">plus券后</text>
            <text class="price-value">9折</text>
          </view>
        </view> -->

 <!--       <view class="product-showcase">
          <image class="product-image" src="" mode="aspectFit"></image>
          <text class="product-feature">护膝款</text>
          <text class="product-feature">长效续航</text>
        </view> -->

        <view class="trial-tag">60天试用</view>
        <view class="warranty-tag">五年退换联保</view>

        <view class="promotion-highlight">
          <text class="highlight-text">更便宜 趁现在!</text>
        </view>

        <view class="price-section">
          <view class="current-price">
            <text class="currency">¥</text>
            <text class="amount">¥{{ item.assisitvePrice }}</text>
          </view>
          <view class="original-price">
            <text>¥{{ item.assisitveOriginal }}</text>
            <text class="discount-tag">专享价:¥80</text>
          </view>
          <view class="order-count">4<text class="small-text">+购买</text></view>
        </view>

        <view class="product-bottom">
          <text class="product-desc">本商品为全额自费商品, 不享受保障补贴。</text>
          <text class="product-brand">——品质医疗——</text>
        </view>
      </view>
    </view>

    <!-- 商品详情区域 -->
    <view class="product-info">
      <view class="enterprise-intro">
		  <text class="brand-name">上市品牌</text>
        <image class="certification-image" src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/assisitdev/(1).jpg"></image>
      </view>
      
      <view class="enterprise-intro">
        <image class="certification-image" src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/assisitdev/(2).jpg"></image>
      </view>

      <view class="enterprise-intro">
		<image class="certification-image" src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/assisitdev/(3).jpg"></image>
      </view>
	  <view class="enterprise-intro">
	  		<image class="certification-image" src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/assisitdev/(4).jpg"></image>
	  </view>
	  <view class="enterprise-intro">
	  		<image class="certification-image" src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/assisitdev/(5).jpg"></image>
	  </view>
	  <view class="enterprise-intro">
	  		<image class="certification-image" src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/assisitdev/(6).jpg"></image>
	  </view>
	  <view class="enterprise-intro">
	  		<image class="certification-image" src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/assisitdev/(7).jpg"></image>
	  </view>
	  <view class="enterprise-intro">
	  		<image class="certification-image" src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/assisitdev/(8).jpg"></image>
	  </view>
	  <view class="enterprise-intro">
	  		<image class="certification-image" src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/assisitdev/(9).jpg"></image>
	  </view>
	  <view class="enterprise-intro">
	  		<image class="certification-image" src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/assisitdev/(10).jpg"></image>
	  </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="footer-bar">
      <view class="home-btn">
        <image class="home-icon" src="/images/home.png"></image>
        <text>首页</text>
      </view>
      <view class="action-buttons">
        <view class="add-cart-btn" @click="addToCart">
          <image class="btn-icon" src="/images/add-cart.png"></image>
          <text>加入购物车</text>
        </view>
        <view class="buy-now-btn" @click="buyNow">
          <image class="btn-icon" src="/images/buy-now.png"></image>
          <text>立即购买</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import * as assistDev from '../../common/api/assistDev.js'
export default {
  data() {
    return {
      // 商品数据
      productInfo: {
        id: '123456',
        name: '安全护具租赁套餐',
        price: 126,
        originalPrice: 252,
        discount: '80',
        purchaseCount: '4+'
      },
	   gridList: [],
	  initCurrentCode:''
    }
  },
  onLoad(opt) {
  	if(opt.code){
  		this.initCurrentCode = opt.code
		this.getDeviceInfo()
  	}
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      });
    },
	getDeviceInfo() {
		const param = {
			assisitveName:this.initCurrentCode
		}
		assistDev.getDeviceInfo(
			param).then(result => {
			console.log("result",result);
			this.gridList = result.data.data || []
		}).catch(error => {
			console.log(error);
		})
	},
    addToCart() {
      uni.showToast({
        title: '已加入购物车',
        icon: 'success'
      });
    },
    buyNow() {
	  const code = this.initCurrentCode
      uni.navigateTo({
        // url: '/pages/order/checkout?id=' + this.productInfo.id
		 url: "/accessoryRentalPages/pages/index/address?code=" + code
      });
    }
  }
}
</script>

<style lang="scss" scoped>
/* 全局样式 */
.container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 导航栏样式 */
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 44px;
  background-color: #00b29a;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  z-index: 100;
  box-sizing: border-box;

  .nav-icon, .nav-icon-more {
    width: 24px;
    height: 24px;
  }

  .nav-title {
    font-size: 18px;
    font-weight: 500;
  }
}

/* 广告横幅样式 */
.banner-container {
  margin-top: 44px;
  width: 100%;
  position: relative;

  .banner-bg {
    width: 100%;
    height: 240px;
  }

  .banner-content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;

    .banner-top {
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      .banner-logo {
        width: 80px;
        height: 20px;
      }

      .banner-brand {
        font-size: 14px;
        color: #fff;
        margin-left: 5px;
      }
    }

    .banner-promotion {
      display: flex;
      align-items: center;
      margin-bottom: 15px;

      .premium {
        background-color: #ff4d4f;
        padding: 2px 5px;
        border-radius: 3px;
        font-size: 12px;
        margin-right: 5px;
      }

      .promotion-tag {
        font-size: 12px;
        color: #fff;
      }

      .promotion-price {
        margin-left: auto;
        background-color: rgba(0,0,0,0.6);
        padding: 2px 8px;
        border-radius: 15px;

        .price-label {
          font-size: 10px;
        }

        .price-value {
          font-size: 12px;
          font-weight: bold;
        }
      }
    }

    .product-showcase {
      position: relative;
      width: 100%;
      height: 100px;
      margin-bottom: 10px;

      .product-image {
        width: 100%;
        height: 100%;
      }

      .product-feature {
        position: absolute;
        font-size: 10px;
        color: #fff;
        background-color: rgba(0,0,0,0.6);
        padding: 2px 5px;
        border-radius: 3px;
      }

      .product-feature:first-child {
        left: 10px;
        bottom: 10px;
      }

      .product-feature:last-child {
        right: 10px;
        bottom: 10px;
      }
    }

    .trial-tag {
      display: inline-block;
      background-color: #2e8b57;
      color: #fff;
      font-size: 14px;
      padding: 2px 10px;
      border-radius: 20px;
      margin-bottom: 5px;
    }

    .warranty-tag {
      display: inline-block;
      background-color: #fff;
      color: #2e8b57;
      font-size: 12px;
      padding: 2px 10px;
      border-radius: 20px;
      border: 1px solid #2e8b57;
      margin-bottom: 15px;
    }

    .promotion-highlight {
      background-color: #ff4d4f;
      padding: 5px 10px;
      border-radius: 3px;
      margin-bottom: 10px;

      .highlight-text {
        color: #fff;
        font-size: 14px;
        font-weight: bold;
      }
    }

    .price-section {
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      .current-price {
        display: flex;
        align-items: baseline;
        color: #ff4d4f;
        margin-right: 10px;

        .currency {
          font-size: 16px;
        }

        .amount {
          font-size: 32px;
          font-weight: bold;
        }
      }

      .original-price {
        flex: 1;
        font-size: 12px;
        color: #999;

        .discount-tag {
          margin-left: 5px;
          color: #ff4d4f;
        }
      }

      .order-count {
        display: flex;
        align-items: center;
        color: #999;
        font-size: 12px;

        .small-text {
          font-size: 10px;
        }
      }
    }

    .product-bottom {
      .product-desc {
        display: block;
        font-size: 10px;
        color: #666;
        margin-bottom: 5px;
      }

      .product-brand {
        display: block;
        font-size: 12px;
        color: #999;
      }
    }
  }
}

/* 商品信息区域 */
.product-info {
  padding: 15px;
  background-color: #fff;

  .brand-section {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .brand-logo {
      width: px;
      height: 30px;
	  
      border-radius: 50%;
      margin-right: 10px;
    }

    .brand-name {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .certification {
    display: flex;
    align-items: center;
    margin-bottom: 15px;

    .certification-text {
      font-size: 14px;
      color: #666;
      margin-right: 10px;
    }

    .certification-image {
      width: 20px;
      height: 20px;
    }
  }

  .enterprise-intro {
    font-size: 12px;
    color: #999;
    line-height: 1.5;
  }
}

/* 底部操作栏 */
.footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
  display: flex;
  border-top: 1px solid #eee;
  z-index: 100;

  .home-btn {
    width: 60px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    color: #666;

    .home-icon {
      width: 20px;
      height: 20px;
      margin-bottom: 2px;
    }
  }

  .action-buttons {
    flex: 1;
    display: flex;
    height: 100%;

    .add-cart-btn, .buy-now-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #00b29a;
      color: #fff;
      font-size: 14px;

      .btn-icon {
        width: 20px;
        height: 20px;
        margin-bottom: 2px;
      }
    }

    .buy-now-btn {
      background-color: #ff6b6b;
    }
  }
}

/* 安全区域适配 */
.safe-area-bottom {
  height: env(safe-area-inset-bottom);
}
</style>